<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>非单文件组件学习</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <!-- 第三步，使用组件   就是定义的组件标签，并且在Vue中注册了 -->
      <school></school>
      <hello></hello>
      <hr />
      <!-- 体现复用性，以及修改一个数据不影响其他的 -->
      <student></student>
      <student></student>
      <hr />
      <h2>{{otherMsg}}</h2>
    
    </div>

    <!-- 再声明另外一个容器 -->
    <div id="root2">
      <!-- 如果未注册，无法直接使用组件，会报错 -->
      <hello></hello>
    </div>
  </body>

  <script type="text/javascript">
    //1：创建组件
    //创建school组件，使用Vue的关键组件extend创建
    const school = Vue.extend({
      //组件不能使用 el 指定服务的容器，便于后续其他地方使用
      //el: "#root",

      //将标签也放入组件，需使用template定义，使用``便于换行
      //一旦使用template，还需要有一个根元素包裹里面的元素，例如div
      template: `
      <div>
          <h2>学校名称: {{schoolName}}</h2>
          <h2>学校地址: {{address}}</h2>
          <button @click='showName'>点我提示学校名</button>
      </div>
      `,

      //data必须使用函数式，否则Vue会直接报错。防止多个地方调用组件互相修改
      //可理解为Java的对象复用，和创建新对象
      data() {
        //内部返回一个对象
        return {
          schoolName: "尚硅谷",
          address: "北京昌平",
        };
      },

      //在组件中设置事件处理
      methods: {
        showName() {
          alert(this.schoolName);
        },
      },
    });

    //创建student组件
    const student = Vue.extend({
      data() {
        //返回一个对象
        return {
          studentName: "里斯",
          age: 18,
        };
      },
      template: `
      <div>
        <h2>学生姓名: {{studentName}}</h2>
        <h2>学校年龄: {{age}}</h2>
      </div>
      `,
    });

    //容器2的，后续相关代码优化为组件了
    const hello = Vue.extend({
      template: `
        <div>
          <h2>你好啊{{name}}</h2>
        </div>
      `,
      //必须用函数，返回一个对象
      data() {
        return {
          name: "Tom",
        };
      },
    });

    //不改原有代码，可使用全局注册  第一个参数是组件名，第二个是指向的组件
    //创建后，全局容器都可以使用    注意必须在容器渲染前注册！！！
    Vue.component("hello", hello);

    //创建针对于当前页面的VUE实例，并通过el绑定容器
    const vm = new Vue({
      el: "#root",
      //2：局部注册
      //全新的配置项 components（类似Java容器，管理Bean对象）
      //作为一个对象声明，里面可以配置多个组件
      components: {
        //创建组件名，并指定组件，例如：aa:school，如果同名可简写
        school,
        student,
      },
      data: {
        otherMsg: "同时可以添加其他的自定义属性和数据",
      },
    });

    //新创建了一个容器，默认不注册组件
    const vm2 = new Vue({
      el: "#root2",
    });
  </script>
</html>
